<template>
  <div class="achievement-test">
    <!-- 导航菜单 -->
    <nav class="navbar">
      <button @click="activeTab = 'papers'">论文管理</button>
      <button @click="activeTab = 'vertical'">纵向课题</button>
      <button @click="activeTab = 'horizontal'">横向课题</button>
    </nav>

    <!-- 论文管理测试 -->
    <div v-if="activeTab === 'papers'" class="paper-section">
      <h2>论文管理测试</h2>
      <div class="control-panel">
        <button @click="fetchPapers">获取论文数据</button>
        <button @click="showPaperForm = true">添加新论文</button>
      </div>

      <!-- 论文列表 -->
      <div v-if="papers.length" class="paper-list">
        <div v-for="paper in papers" :key="paper.id" class="paper-item">
          <h3>{{ paper.paperTitle }}</h3>
          <p>期刊: {{ paper.journal }} | 发表日期: {{ formatDate(paper.publishDate) }}</p>
          <p>第一作者: {{ paper.firstAuthor }} | 影响因子: {{ paper.impactFactor }}</p>
          <button @click="editPaper(paper)">编辑</button>
          <button @click="deletePaper(paper.id)">删除</button>
        </div>
      </div>
      <p v-else>暂无论文数据</p>

      <!-- 论文表单 -->
      <div v-if="showPaperForm" class="modal">
        <div class="modal-content">
          <h3>{{ editingPaper ? '编辑论文' : '添加新论文' }}</h3>
          <form @submit.prevent="submitPaper">
            <div class="form-group">
              <label>论文标题:</label>
              <input v-model="paperForm.paperTitle" required>
            </div>
            <div class="form-group">
              <label>期刊名称:</label>
              <input v-model="paperForm.journal" required>
            </div>
            <div class="form-group">
              <label>第一作者:</label>
              <input v-model="paperForm.firstAuthor" required>
            </div>
            <div class="form-group">
              <label>发表日期:</label>
              <input type="date" v-model="paperForm.publishDate" required>
            </div>
            <button type="submit">提交</button>
            <button type="button" @click="cancelPaperForm">取消</button>
          </form>
        </div>
      </div>
    </div>

    <!-- 纵向课题测试 -->
    <div v-if="activeTab === 'vertical'" class="vertical-section">
      <h2>纵向课题测试</h2>
      <!-- 类似论文的展示和操作界面 -->
    </div>

    <!-- 横向课题测试 -->
    <div v-if="activeTab === 'horizontal'" class="horizontal-section">
      <h2>横向课题测试</h2>
      <!-- 类似论文的展示和操作界面 -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'AchievementTest',
  data() {
    return {
      activeTab: 'papers',
      papers: [],
      showPaperForm: false,
      editingPaper: null,
      paperForm: {
        paperTitle: '',
        journal: '',
        firstAuthor: '',
        publishDate: ''
      }
    }
  },
  methods: {
    // 获取论文数据
    async fetchPapers() {
      try {
        // 模拟API调用
        this.papers = [
          {
            id: 1,
            paperTitle: '基于深度学习的图像识别研究',
            journal: '计算机学报',
            firstAuthor: '张三',
            publishDate: '2023-05-15',
            impactFactor: 2.5
          },
          {
            id: 2,
            paperTitle: '新型材料在建筑工程中的应用',
            journal: '材料科学',
            firstAuthor: '李四',
            publishDate: '2023-03-20',
            impactFactor: 3.1
          }
        ]
        console.log('论文数据获取成功')
      } catch (error) {
        console.error('获取论文数据失败:', error)
      }
    },

    // 编辑论文
    editPaper(paper) {
      this.editingPaper = paper
      this.paperForm = {
        paperTitle: paper.paperTitle,
        journal: paper.journal,
        firstAuthor: paper.firstAuthor,
        publishDate: paper.publishDate
      }
      this.showPaperForm = true
    },

    // 提交论文表单
    submitPaper() {
      if (this.editingPaper) {
        // 更新现有论文
        const index = this.papers.findIndex(p => p.id === this.editingPaper.id)
        this.papers.splice(index, 1, {
          ...this.editingPaper,
          ...this.paperForm
        })
      } else {
        // 添加新论文
        this.papers.push({
          id: this.papers.length + 1,
          ...this.paperForm,
          impactFactor: 0
        })
      }
      this.cancelPaperForm()
    },

    // 删除论文
    deletePaper(id) {
      this.papers = this.papers.filter(paper => paper.id !== id)
    },

    // 取消表单
    cancelPaperForm() {
      this.showPaperForm = false
      this.editingPaper = null
      this.paperForm = {
        paperTitle: '',
        journal: '',
        firstAuthor: '',
        publishDate: ''
      }
    },

    // 格式化日期
    formatDate(dateString) {
      return new Date(dateString).toLocaleDateString()
    }
  },
  mounted() {
    this.fetchPapers()
  }
}
</script>

<style scoped>
.achievement-test {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.navbar {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.paper-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 15px;
  margin-top: 20px;
}

.paper-item {
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 5px;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 5px;
  width: 500px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
}

.form-group input {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}

button {
  padding: 8px 15px;
  margin-right: 10px;
  cursor: pointer;
}
</style>